<template>
	<view class="filter" v-if="isShow">
		<yang-dropdown activeColor="#FFC434" :filterData="filterData" @change="handChange">
			<template #right>
				<view class="flex align-center">
					<view class="saixuan" @click="handOpen">
						<text>筛选</text>
						<image src="/static/icon/filter.png" mode=""></image>
					</view>
				</view>
			</template>
		</yang-dropdown>
		<view class="pop">
			<FilterPop isFilter :isRequire="false" isOne ref="popRef" @change="filterChange" />
		</view>
	</view>
</template>

<script setup>
	import FilterPop from '@/components/FilterPop.vue'
	import {
		ref,
		reactive,
		defineEmits
	} from "vue";
	import {
		doPlatform,
		doBrandList
	} from '@/apis/system.js'

	const emit = defineEmits('change')

	const filterData = ref([{
		"name": '价格',
		"key": 'price',
		"select": 0,
		"submenu": [{
			"label": "价格",
			"value": [],
		}, {
			"label": "0-2千",
			"value": [0, 1999]
		}, {
			"label": "2千-4千",
			"value": [2000, 3999]
		}, {
			"label": "4千-6千",
			"value": [4000, 5999]
		}, {
			"label": "6千-8千",
			"value": [6000, 7999]
		}, {
			"label": "8千-1万",
			"value": [8000, 9999]
		}, {
			"label": "1万 以上",
			"value": [10000, '']
		}]
	}, {
		"name": '接单平台',
		"key": 'platform',
		"select": 0,
		"submenu": []
	}, {
		"name": '接单平台',
		"key": 'brand',
		"select": 0,
		"submenu": []
	}])
	const brand = ref('')
	const handModel = () => {
		uni.navigateTo({
			url: '/pagesA/dealers/brand',
			events: {
				someEvent: async (e) => {
					brand.value = e.name
					emit('change', {
						brand: e.name
					})
				}
			}
		})
	}

	const popRef = ref(null)
	let form = {}
	const handOpen = () => {
		popRef.value.handOpen(form)
	}
	const filterChange = (e) => {
		form = e
		emit('change', e)
	}

	const handChange = (e) => {
		const queryForm = {}
		e.forEach(el => {
			if (el.labelKey === 'price') {
				if (el.value.lenght === 0) {
					queryForm.startPrice = ''
					queryForm.endPrice = ''
				} else {
					queryForm.startPrice = el.value[0] || ''
					queryForm.endPrice = el.value[1] || ''
				}
			} else {
				queryForm[el.labelKey] = el.value
			}
		})
		emit('change', queryForm)
	}

	const isShow = ref(false)
	const init = async () => {
		const res = await Promise.all([doPlatform(), doBrandList()])
		filterData.value[1].submenu = [{
			"label": "接单平台",
			"value": '',
		}, ...res[0].map(el => {
			return {
				label: el.name,
				value: el.name
			}
		})]
		filterData.value[2].submenu = [{
			"label": "车辆品牌",
			"value": '',
		}, ...res[1].map(el => {
			return {
				label: el.name,
				value: el.name
			}
		})]
		isShow.value = true
	}
	init()
</script>

<style lang="scss" scoped>
	.filter {
		.tab {
			width: 200rpx;
			padding: 25rpx 0;
			font-size: 28rpx;
			color: v-bind("color");
			display: flex;
			align-items: center;
			justify-content: center;

			.active {
				color: #FFC434;
			}

			.cuIcon-usefullfill {
				font-size: 22rpx;
				margin-left: 10rpx;
				transform: rotate(180deg);
				transition: all 0.3s;
			}

			.active-icon {
				transform: rotate(0deg);
				color: #FFC434;
			}
		}

		.saixuan {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			padding: 0 32rpx 0 24rpx;
			border-left: 1rpx solid #DDDDDD;

			image {
				margin-left: 8rpx;
				width: 24rpx;
				height: 24rpx;
			}
		}

		.pop {
			position: relative;
			z-index: 110;
		}
	}
</style>